<template>
  <div class="app-page">
    <div class="app-content">
      <section class="section section-banner">
        <carousel :indicators="true" :auto="3000" v-if="bannerList.length">
          <div class="carousel-i" v-for="banner in bannerList">
            <img :src="banner.picUrl|qiniuimage" alt="">
          </div>
        </carousel>
      </section>
      <div class="section section-hot">
        <!--<toy-item v-for="i in 4"></toy-item>-->
      </div>
      <section class="section section-theme" v-for="theme in themeList">
        <div class="theme-banner" :style="'background-image:url(http://7xiipu.com1.z0.glb.clouddn.com/'+theme.imgPath+')'">
          <div class="banner-outer">
            <div class="banner-inner">
              {{theme.name}}
            </div>
          </div>
        </div>
        <div class="theme-toys">
          <div class="theme-items" v-for="toy in theme.themeToyList">
            <div class="theme-info">
              <div class="toy-name">{{toy.name}}</div>
              <div class="other">
                <div class="toy-age">{{toy.ageSpan}}</div>
                <div class="toy-rank">
                  <div class="star-img img-star">
                    <!--<img src="../images/star.png">
                                                                                                                  <img src="../images/star.png">-->
                  </div>
                </div>
              </div>
            </div>
            <div class="toy-image">
              <img :src="toy.images[0].slidePicPath|qiniuimage">
            </div>
          </div>
        </div>
      </section>

    </div>
    <!--<app-footer>
                  <nav-bar></nav-bar>
              </app-footer>-->
  </div>
</template>
<script>
import Carousel from 'vue-m-carousel';
import AppHeader from '../components/AppHeader';
// import AppFooter from '../components/AppFooter';
import NavBar from '../components/NavBar';

// import { bannerQuery, themeQuery } from '../service/';

export default {
  components: {
    AppHeader,
    // AppFooter,
    NavBar,
    Carousel,
  },
  data() {
    return {
      bannerList: [],
      themeList: [],
    };
  },
  methods: {
  },
  mounted() {
  },
};
</script>

<style  scoped lang="less">
@import (reference) "../style/less/app.less";
</style>

<style lang="less">
@import (reference) "../style/less/app.less";
</style>
